<template>
    <view class="container">
        <!-- <view class="tui-searchbox">
            <view class="tui-search-input" @tap="goGoodsSearch()">
                #ifdef APP-PLUS || MP
                <icon type="search" size="13" color="#999"></icon>
                #endif
                <text class="tui-search-text">搜索你喜爱的商品</text>
            </view>
        </view> -->

        <scroll-view
            scroll-y
            scroll-with-animation
            class="tab-view"
            :scroll-top="scrollTop"
            :style="{ height: height + 'px' }"
        >
            <view
                v-for="(item, index) in cateMain"
                :key="index"
                class="tab-bar-item"
                :class="[currentTab == index ? 'active' : '']"
                :data-current="index"
                @tap.stop="swichNav"
                :data-key="item.id"
            >
                <text>{{ item.name }}</text>
            </view>
        </scroll-view>

        <block v-for="(item, index) in cateMain" :key="index">
            <scroll-view
                scroll-y
                class="right-box"
                :style="{ height: height + 'px' }"
                v-if="currentTab == index"
            >
                <!--内容部分 start 自定义可删除-->
                <view class="page-view">
                    <view class="class-box">
                        <view class="class-item">
                            <view class="class-name">{{ item.name }}</view>
                            <view class="g-container">
                                <view
                                    v-for="(item, index) in cateMainGoods"
                                    :key="index"
                                    class="g-box"
                                    @tap.stop="goGoodsView"
                                    :data-key="item.id"
                                >
                                    <image
                                        :src="item.img_logo"
                                        class="g-image"
                                    />
                                    <view class="g-title">{{ item.name }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!--内容部分 end 自定义可删除-->
            </scroll-view>
        </block>
    </view>
</template>

<script>
export default {
    data() {
        return {
            cateId: 0, //当前页面的主分类ID
            cateMain: [], //主分类
            cateMainGoods: [], //主分类推荐产品

            height: 0, //scroll-view高度
            top: 0,
            currentTab: 0, //预设当前项的值
            scrollTop: 0, //tab标题的滚动条位置
        };
    },

    methods: {
        // 点击标题切换当前页时改变样式
        swichNav: function (e) {
            let cur = e.currentTarget.dataset.current;
            let curKey = e.currentTarget.dataset.key;
            this.cateId = curKey;
            this.initPageData();
            if (this.currentTab == cur) {
                return false;
            } else {
                this.currentTab = cur;
                this.checkCor();
            }
        },
        //判断当前滚动超过一屏时，设置tab标题滚动条。
        checkCor: function () {
            let that = this;
            //这里计算按照实际情况进行修改，动态数据要进行动态分析
            //思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
            //数据很多可以多次if判断然后进行滚动距离计算即可
            if (that.currentTab > 7) {
                that.scrollTop = 500;
            } else {
                that.scrollTop = 0;
            }
        },

        //跳转到二级分类的商品列表页面
        // goGoodsIndex(e) {
        //     let key = e.currentTarget.dataset.key;
        //     uni.navigateTo({
        //         url: "/pages/goods/index?cate_son=" + key,
        //     });
        // },

        //商品详情页面
        goGoodsView: function (e) {
            let key = e.currentTarget.dataset.key;
            uni.navigateTo({
                url: "/pages/goods/view?id=" + key,
            });
        },

        //商品搜索的页面
        goGoodsSearch: function () {
            uni.navigateTo({
                url: "/pages/goods/index",
            });
        },

        //商品分类的广告跳转
        // goGoodsCateAd: function () {
        //     return;
        // },

        //初始化当前页面的数据
        initPageData: function () {
            // this.getGoodsCateSon(); //请求子分类
            // this.getGoodsCateMainAd(); //请求主分类的广告
            this.getGoodsCateMainGoods(); //得到该主分类的推荐商品
        },

        getGoodsCateMain: function () {
            uni.request({
                url: this.$apiUrl + "/api/goods/cateMain",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                success: (res) => {
                    let raw = (res.data && res.data.data) || res.data || [];
                    let list = Array.isArray(raw) ? raw : raw.list || [];
                    this.cateMain = list.map((i) => ({
                        id: i.cate_id,
                        name: i.name,
                    }));
                    if (this.cateMain.length) {
                        this.cateId = this.cateMain[0].id;
                        this.currentTab = 0;
                        this.initPageData();
                    }
                },
            });
        },

        // getGoodsCateSon: function () {
        //     uni.request({
        //         url: this.$apiUrl + "/api/goods/cate-son",
        //         header: {
        //             userId: uni.getStorageSync("userId"),
        //             userToken: uni.getStorageSync("userToken"),
        //             shopId: uni.getStorageSync("shopId"),
        //         },
        //         data: { cate_id: this.cateId },
        //         success: (res) => {
        //             this.cateSon = res.data["data"];
        //         },
        //     });
        // },

        // getGoodsCateMainAd: function () {
        //     uni.request({
        //         url: this.$apiUrl + "/api/goods/cate-main-ad",
        //         header: {
        //             userId: uni.getStorageSync("userId"),
        //             userToken: uni.getStorageSync("userToken"),
        //             shopId: uni.getStorageSync("shopId"),
        //         },
        //         data: { cate_id: this.cateId },
        //         success: (res) => {
        //             this.cateMainAd = res.data["data"];
        //             console.log(this.cateMainAd);
        //         },
        //     });
        // },

        getGoodsCateMainGoods: function () {
            uni.request({
                url: this.$apiUrl + "/api/goods/list",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                data: { cate_main: this.cateId },
                success: (res) => {
                    let d = res.data;
                    let list =
                        (d && d.data && d.data.list) || (d && d.list) || [];
                    this.cateMainGoods = list;
                },
            });
        },
    },
    //页面加载的时候
    onLoad: function (options) {
        setTimeout(() => {
            uni.getSystemInfo({
                success: (res) => {
                    let header = 0;
                    let top = 0;
                    this.height = res.windowHeight - uni.upx2px(header);
                    this.top = top + uni.upx2px(header);
                },
            });
        }, 50);

        if (!uni.getStorageSync("hasLogin")) {
            uni.navigateTo({ url: "/pages/my/login" });
        }

        this.getGoodsCateMain(); //先请求主分类的数据
    },
};
</script>

<style>
page {
    background: #fcfcfc;
}

/* 左侧导航布局 start*/

/* 隐藏scroll-view滚动条*/

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.tui-searchbox {
    width: 100%;
    height: 92upx;
    padding: 0 30upx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    top: 4px;
    z-index: 100;
}

.tui-searchbox::after {
    content: "";
    position: absolute;
    border-bottom: 1upx solid #d2d2d2;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
}

.tui-search-input {
    width: 100%;
    height: 60upx;
    background: #f1f1f1;
    border-radius: 30upx;
    font-size: 26upx;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tui-search-text {
    padding-left: 16upx;
}

.tab-view {
    /* height: 100%; */
    width: 200upx;
    position: fixed;
    left: 0;
    z-index: 10;
}

.tab-bar-item {
    width: 200upx;
    height: 110upx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26upx;
    color: #444;
    font-weight: 400;
}

.active {
    position: relative;
    color: #000;
    font-size: 30upx;
    font-weight: 600;
    background: #fcfcfc;
}

.active::before {
    content: "";
    position: absolute;
    border-left: 8upx solid #e41f19;
    height: 30upx;
    left: 0;
}

/* 左侧导航布局 end*/

.right-box {
    width: 100%;
    position: fixed;
    padding-left: 220upx;
    box-sizing: border-box;
    left: 0;
}

.page-view {
    width: 100%;
    overflow: hidden;
    padding-top: 20upx;
    padding-right: 20upx;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
}

.swiper {
    width: 100%;
    height: 220upx;
    border-radius: 12upx;
    overflow: hidden;
    transform: translateZ(0);
}

/* #ifdef APP-PLUS || MP */
.swiper .wx-swiper-dot {
    width: 8upx;
    height: 8upx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
}

.swiper .wx-swiper-dot::before {
    content: "";
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16upx;
    overflow: hidden;
}

.swiper .wx-swiper-dot-active::before {
    background: #fff;
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
    width: 16upx;
}

/* #endif */

/* #ifdef H5 */
>>> .swiper .uni-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
}

>>> .swiper .uni-swiper-dot::before {
    content: "";
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    overflow: hidden;
}

>>> .swiper .uni-swiper-dot-active::before {
    background: #fff;
}

>>> .swiper .uni-swiper-dot.uni-swiper-dot-active {
    width: 16rpx;
}

/* #endif */

.slide-image {
    width: 100%;
    height: 220upx;
}

/* .class-box {
    padding-top: 30upx;
} */

.class-item {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 20upx;
    margin-bottom: 20upx;
    border-radius: 12upx;
}

.class-name {
    font-size: 22upx;
}

.g-container {
    /* padding-top: 20upx; */
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.g-box {
    width: 50%;
    text-align: center;
    padding-top: 40upx;
}

.g-image {
    width: 120upx;
    height: 120upx;
}

.g-title {
    font-size: 22upx;
}
</style>
